@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --compact-width: 60px;
}

@layer components {
  .box {
    @apply bg-white dark:bg-gray-900 p-4 shadow-sm shadow-gray-200 dark:shadow-gray-900 rounded-md;
    @apply transition-all hover:shadow-lg hover:shadow-gray-200 dark:hover:shadow-gray-800;
    @apply border dark:border-gray-700;
  }

  .box-connector {
    @apply relative mt-7;
  }

  .box-connector:after {
    content: '';
    @apply absolute -top-7 left-1/2;
    @apply w-[2px] h-7 bg-gray-200 dark:bg-gray-700;
  }

  .box-lg {
    @apply p-6 rounded-lg;
  }

  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .btn-icon {
    @apply w-7 h-6 rounded-md bg-white border dark:bg-gray-800 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-900 p-1.5 transition-all;
  }
}

[data-radix-popper-content-wrapper] div {
  outline: none;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600;
}

/* Handle on hover */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

.root-container {
  @apply flex overflow-x-hidden;
}

/* .root-container * { */
/*   @apply transition-all duration-150; */
/* } */

.root-sidebar {
  @apply h-screen border-r dark:bg-gray-900 dark:border-r-gray-800;
  @apply hidden sm:flex items-start;
  @apply transition-all;

  &.compact {
    width: var(--compact-width) !important;
  }
}

.root-sidebar.compact {
  & .side-nav {
    width: var(--compact-width);
  }

  .scroll-viewport {
    width: var(--compact-width);
  }
}

.root-sidebar.compact + .main-content {
  width: calc(100% - var(--compact-width)) !important;
}

.primary-sidebar {
  @apply flex flex-col justify-between h-screen border-r dark:border-r-gray-800;
}

.root-sidebar.compact {
  .secondary-sidebar{
    width: var(--compact-width);
  }

  .org-section-popup {
    @apply hidden;
  }

  .nav-org-section {
    padding-bottom: 22px !important;
  }

  .user-section-action {
    @apply hidden;
  }

  .org-section-container {
    @apply flex-col gap-2;
  }

  .org-section-info {
    @apply hidden;
  }

  .secondary-sidebar .scroll-root {
    height: calc(100vh - 150px) important;
  }

  .create-project-btn {
    @apply hidden;
  }

  .tooltip-wrap-div {
    @apply hidden;
  }

  .side-nav .nav-item {
    @apply gap-0 justify-center;
  }

  .side-nav .side-title {
    @apply justify-center;
  }

  .user-section-info {
    @apply hidden;
  }

  .nav .section,
  .nav .section:hover
  {
    @apply text-transparent whitespace-nowrap;
    @apply h-[1px] w-[30px] mx-auto bg-gray-200 dark:bg-gray-800 py-0 my-2 rounded-none;
  }


  .side-nav .nav-item .right,  
  .side-nav .nav-item .left svg,
  .side-nav .nav-item .left span,
  .side-title span {
    @apply hidden;
  }

  .main-content {
    width: calc(100% - 61px) !important;
  }

  .main-content .board-container {
    width: calc(100vw - 74px) !important;
  }
}

.root-sidebar.compact + .main-content .board-container { 
  width: calc(100vw - var(--compact-width)) !important;
}

.root-sidebar .main-nav-icon {
  @apply m-2 p-3 w-10 h-10 text-gray-400 rounded-lg cursor-pointer;
  @apply hover:text-gray-600 hover:bg-gray-100;
  @apply dark:hover:text-indigo-100 dark:hover:bg-gray-900/50;
}

.root-sidebar .main-nav-icon.active {
  @apply text-indigo-500 bg-indigo-50 dark:bg-indigo-50/10;
  @apply hover:text-indigo-600 hover:bg-indigo-50;
  @apply dark:hover:text-indigo-400 dark:hover:bg-indigo-50/20;
}

.side-nav {
  @apply dark:border-t-gray-800 pt-3;
  @apply w-[250px] shrink-0;
}

.side-nav h2,
.side-nav .side-title {
  @apply uppercase text-xs font-medium text-gray-500 px-3 py-2 mx-1.5;
  @apply flex justify-between items-center rounded-md;
  @apply hover:text-indigo-500;
}

.side-nav .section {
  @apply uppercase text-[10px] font-medium text-gray-500 px-3 py-2 mx-1.5;
  @apply flex justify-between items-center rounded-md;
  @apply hover:text-gray-500 dark:hover:text-gray-500;
}

.side-nav .side-title.active {
  /* @apply bg-indigo-50/70 text-indigo-500; */
  /* @apply dark:bg-indigo-50/10 text-indigo-400; */
  @apply text-indigo-500;
  @apply text-indigo-400;
}

.side-nav .section-icon {
  @apply cursor-pointer hover:bg-gray-100 border w-7 h-7 p-1 rounded-md;
}

.side-nav nav a {
}

.side-nav .nav-icon {
  @apply text-sm text-gray-400;
}

.nav .nav-item {
  @apply flex transition-all items-center justify-between gap-2 px-3 text-sm text-gray-600 py-2 rounded-md mx-1.5;
  @apply dark:text-gray-500;
}

.nav .nav-item .left {
  @apply flex items-center gap-2;
}

.nav .nav-item:hover img {
  @apply transition-all scale-110;
}

.nav .nav-item:hover {
  @apply text-indigo-400;
}

.nav .nav-item.active {
  @apply bg-indigo-50 text-indigo-600;
  /* @apply bg-zinc-100 text-gray-600; */
  @apply dark:bg-indigo-50/10 dark:text-indigo-400;
}

.tab {
  @apply flex;
}

.tab-item {
  @apply flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400;
  @apply cursor-pointer py-2 px-3 border-b-2 border-transparent;
}

.tab-item.active {
  @apply border-indigo-400 text-indigo-700;
  @apply dark:border-indigo-300 text-indigo-400;
}

.sign-page {
  /* background-image: url('/background.png'); */
  /* background-repeat: no-repeat; */
  /* background-position: center; */
  @apply bg-white dark:bg-gray-900;
}

.sign-page-background {
  background-image: url('/background.png');
  background-repeat: no-repeat;
  background-position: center;

}

.droppable {
  @apply border-indigo-400 bg-indigo-100;
}

.droppable * {
  @apply pointer-events-none;
}

.table {
  @apply text-sm rounded-md border text-gray-500 w-full bg-white;
  @apply dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400;
}

.table td,
.table th {
  @apply whitespace-nowrap px-1.5 py-2;
}

.table thead tr {
  @apply divide-x dark:divide-gray-700;
}

.table tbody {
  @apply divide-y border-t dark:divide-gray-700 dark:border-gray-700;
}

.table tbody tr {
  @apply divide-x dark:divide-gray-700;
}

.aside-content {
  @apply flex items-start gap-12
}
.aside-menu {
  @apply w-[350px] shrink-0 space-y-6;

  h2 {
    @apply font-bold text-base dark:text-gray-300 mb-2;
    @apply flex items-center gap-2;
  }

  p {
    @apply text-xs leading-5 text-gray-500
  }
}

.aside-menu section {
  @apply bg-transparent rounded-md px-6 py-5;
  @apply border border-transparent;
  @apply shadow-lg shadow-transparent cursor-pointer;
  @apply transition-all;

  @apply hover:bg-gray-50/70 hover:border-gray-200 hover:shadow-indigo-100;
  @apply dark:hover:bg-gray-900/50 dark:hover:shadow-gray-900 dark:hover:border-gray-700;


  &.active{
    @apply bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700;
    @apply shadow-indigo-100 dark:shadow-gray-900;

    svg {
      @apply rounded-md bg-gray-50;
    }
  }
  
}

.aside-menu section h2 svg {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700;
    @apply w-7 h-7 p-1 rounded-md text-gray-500 dark:text-gray-400;
  }


.aside-content main form {
  @apply w-full space-y-4 bg-white dark:bg-gray-900/70 px-6 py-8 border rounded-lg dark:border-gray-700 shadow-md shadow-indigo-100 dark:shadow-gray-900;
}
